<article>
  <section class="markdown">
    <h1>Grid <span class="subtitle">栅格</span></h1>
    <p>24 栅格系统。</p>
    <h2 id="设计理念"><span>设计理念</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <div class="grid-demo">
      <div class="ant-row demo-row">
        <div class="ant-col-24 demo-col demo-col-1">
          100%
        </div>
      </div>
      <div class="ant-row demo-row">
        <div class="ant-col-6 demo-col demo-col-2">
          25%
        </div>
        <div class="ant-col-6 demo-col demo-col-3">
          25%
        </div>
        <div class="ant-col-6 demo-col demo-col-2">
          25%
        </div>
        <div class="ant-col-6 demo-col demo-col-3">
          25%
        </div>
      </div>
      <div class="ant-row demo-row">
        <div class="ant-col-8 demo-col demo-col-4">
          33.33%
        </div>
        <div class="ant-col-8 demo-col demo-col-5">
          33.33%
        </div>
        <div class="ant-col-8 demo-col demo-col-4">
          33.33%
        </div>
      </div>
      <div class="ant-row demo-row">
        <div class="ant-col-12 demo-col demo-col-1">
          50%
        </div>
        <div class="ant-col-12 demo-col demo-col-3">
          50%
        </div>
      </div>
      <div class="ant-row demo-row">
        <div class="ant-col-16 demo-col demo-col-4">
          66.66%
        </div>
        <div class="ant-col-8 demo-col demo-col-5">
          33.33%
        </div>
      </div>
    </div>
    <p>在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。</p>
    <p>划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。</p>
    <h2 id="概述"><span>概述</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <p>布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：</p>
    <ul>
      <li>
        <p>通过<code>row</code>在水平方向建立一组<code>column</code>（简写col）
        </p></li>
      <li>
        <p>你的内容应当放置于<code>col</code>内，并且，只有<code>col</code>可以作为<code>row</code>的直接元素
        </p></li>
      <li>
        <p>栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用<code>.col-8</code>来创建
        </p></li>
      <li>
        <p>如果一个<code>row</code>中的<code>col</code>总和超过 24，那么多余的<code>col</code>会作为一个整体另起一行排列
        </p></li>
    </ul>
    <h2 id="Flex-布局"><span>Flex 布局</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <p>我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。</p>
    <p>Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。</p></section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
      <nz-code-box [nzTitle]="'基础布局'" id="components-grid-demo-basic" [nzCode]="NzDemoGridBasicCode">
        <nz-demo-grid-basic demo></nz-demo-grid-basic>
        <div intro>
          <p>从堆叠到水平排列。</p>
          <p>使用单一的一组 <code>nz-row</code> 和 <code>nz-col</code> 栅格组件，就可以创建一个基本的栅格系统，所有列（nz-col）必须放在
            <code>nz-row</code> 内。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'区块间隔'" id="components-grid-demo-gutter" [nzCode]="NzDemoGridGutterCode">
        <nz-demo-grid-gutter demo></nz-demo-grid-gutter>
        <div intro>
          <p>栅格常常需要和间隔进行配合，你可以使用 <code>nz-row</code> 的 <code>nzGutter</code> 属性，我们推荐使用 <code>(16+8n)px</code> 作为栅格间隔。
          </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'左右偏移'" id="components-grid-demo-offset" [nzCode]="NzDemoGridOffsetCode">
        <nz-demo-grid-offset demo></nz-demo-grid-offset>
        <div intro>
          <p>列偏移</p>
          <p>使用 <code>nzOffset</code> 可以将列向右侧偏。例如，<code>[nzOffset]="'4'"</code> 将元素向右侧偏移了 4 个列（column）的宽度。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'布局排序'" id="components-grid-demo-sort" [nzCode]="NzDemoGridSortCode">
        <nz-demo-grid-sort demo></nz-demo-grid-sort>
        <div intro>
          <p>列排序</p>
          <p>使用 <code>nzPull</code> 和 <code>nzPush</code> 类就可以很容易的改变列（column）的顺序。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'Flex布局'" id="components-grid-demo-flex" [nzCode]="NzDemoGridFlexCode">
        <nz-demo-grid-flex demo></nz-demo-grid-flex>
        <div intro>
          <p>Flex布局基础</p>
          <p>使用 <code>[nzType]="'flex'"</code> 定义 <code>flex</code> 布局，其子元素根据 <code>[nzJustify]</code> 不同的值
            <code>start</code>,<code>center</code>,<code>end</code>,<code>space-between</code>,<code>space-around</code>，分别定义其在父节点里面的排版方式。
          </p></div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'Flex对齐'" id="components-grid-demo-flex-align" [nzCode]="NzDemoGridFlexAlignCode">
        <nz-demo-grid-flex-align demo></nz-demo-grid-flex-align>
        <div intro>
          <p>Flex 子元素垂直对齐。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'Flex排序'" id="components-grid-demo-flex-order" [nzCode]="NzDemoGridFlexOrderCode">
        <nz-demo-grid-flex-order demo></nz-demo-grid-flex-order>
        <div intro>
          <p>通过 Flex 布局的 Order 来改变元素的排序。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'响应式布局'" id="components-grid-demo-responsive" [nzCode]="NzDemoGridResponsiveCode">
        <nz-demo-grid-responsive demo></nz-demo-grid-responsive>
        <div intro>
          <p>参照 Bootstrap 的
            <a href="http://getbootstrap.com/css/#grid-media-queries">响应式设计</a>
            ，预设四个响应尺寸：<code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code>。
          </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'其他属性的响应式'" id="components-grid-demo-responsive-more" [nzCode]="NzDemoGridResponsiveMoreCode">
        <nz-demo-grid-responsive-more demo></nz-demo-grid-responsive-more>
        <div intro>
          <p>
            <code>span</code>  <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> 属性可以通过内嵌到 <code>nzXs</code> <code>nzSm</code> <code>nzMd</code> <code>nzLg</code> <code>nzXl</code> 属性中来使用。
          </p>
          <p>
            其中 <code>[nzXs]="6"</code> 相当于 <code>nzXs={{'{'}}{{'{'}} span: 6 {{'}'}}{{'}'}}</code>
          </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'栅格配置器'" id="components-grid-demo-gutter-config" [nzCode]="NzDemoGridGutterConfigCode">
        <nz-demo-grid-gutter-config demo></nz-demo-grid-gutter-config>
        <div intro>
          <p>可以简单配置几种等分栅格和间距。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <h3 id="Row"><span>[nz-row]</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>成员</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzGutter</td>
          <td>栅格间隔</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzType</td>
          <td>布局模式，可选 <code>flex</code>，现代浏览器下有效</td>
          <td>String</td>
          <td></td>
        </tr>
        <tr>
          <td>nzAlign</td>
          <td>flex 布局下的垂直对齐方式：<code>top</code> <code>middle</code> <code>bottom</code></td>
          <td>String</td>
          <td><code>top</code></td>
        </tr>
        <tr>
          <td>nzJustify</td>
          <td>flex 布局下的水平排列方式：<code>start</code> <code>end</code> <code>center</code> <code>space-around</code>
            <code>space-between</code>
          </td>
          <td>String</td>
          <td><code>start</code></td>
        </tr>
      </tbody>
    </table>
    <h3 id="Col"><span>[nz-col]</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>成员</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzSpan</td>
          <td>栅格占位格数，为 0 时相当于 <code>display: none</code></td>
          <td>Number</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzOrder</td>
          <td>栅格顺序，<code>flex</code> 布局模式下有效</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzOffset</td>
          <td>栅格左侧的间隔格数，间隔内不可以有栅格</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzPush</td>
          <td>栅格向右移动格数</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzPull</td>
          <td>栅格向左移动格数</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzXs</td>
          <td><code>&lt;768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
          <td>Number|Object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzSm</td>
          <td><code>≥768px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
          <td>Number|Object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzMd</td>
          <td><code>≥992px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
          <td>Number|Object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzLg</td>
          <td><code>≥1200px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
          <td>Number|Object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzXl</td>
          <td><code>≥1600px</code> 响应式栅格，可为栅格数或一个包含其他属性的对象</td>
          <td>Number|Object</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>
